<!--http、https IP切换-->
<template>
  <div v-show="formData[key].isshow" class="select-speed">
    <el-form-item
      :label="component.attrName"
      :prop="key + '.value'"
      v-model="formData[key].value"
      :required="formData[key].required.split(',').includes('empty')"
    >
      <el-input placeholder="" v-model="speedValue" class="input-with-select">
      </el-input>
      <el-radio-group v-model="speedName" class="input-with-radio">
        <el-radio-button label="K"></el-radio-button>
        <el-radio-button label="M"></el-radio-button>
        <el-radio-button label="G"></el-radio-button>
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "qosSpeed",
  data() {
    return {
      speedValue: "",
      speedName: "M",
    };
  },
  props: {
    component: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
    },
    ruleData: {
      type: Object,
    },
  },
  computed: {
    key() {
      return this.component.pageTempStructId + "-" + this.component.attrId;
    },
  },
  watch: {
    speedValue: {
      handler(newVal, oldVal) {
        let val = newVal + this.speedName;
        this.formData[this.key].value = val + "";
      },
    },
    speedName: {
      handler(newVal, oldVal) {
        let val = this.speedValue + newVal;
        if (this.speedValue != "") {
          this.formData[this.key].value = val + "";
        }else{
          this.formData[this.key].value ="";
        }
      },
    },
  },
  created() {
    let val = this.formData[this.key].value;
    if (val != "") {
      this.speedValue = parseInt(val) == NaN ? "" : parseInt(val);
      this.speedName = val.replace(/[^a-z]+/gi, "") || "";
    }
  },
};
</script>

<style lang="scss" scoped>
.select-speed {
  ::v-deep .input-with-select {
    float: left;
    width: 40%;
  }

  ::v-deep .input-with-radio {
    float: left;
    margin-left: 15px;
    line-height: 40px;
  }

  ::v-deep .el-radio-button__inner {
    height: 34px !important;
    line-height: 34px !important;
  }
}
</style>